<template>
  <div>
    <el-dialog
      :title="diaInfo.isAdd ? '添加角色' : '编辑角色'"
      :visible.sync="diaInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="roleForm" :rules="rules" ref="roleRef">
        <el-form-item label="角色名称" prop="rolename" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="roleForm.rolename"></el-input>
        </el-form-item>

        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <!-- 
                el-tree
                data	展示数据
                show-checkbox	节点是否可被选择
                node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
                props	配置选项，具体看下表
                children	指定子树为节点对象的某个属性值
                abel	指定节点标签为节点对象的某个属性值
                default-expand-all	是否默认展开所有节点
             -->
          <el-tree
            ref="tree"
            :data="$store.getters['menu/getMenu']"
            show-checkbox
            node-key="id"
            :props="{
              children: 'children',
              label: 'title',
            }"
            default-expand-all
            check-strictly
          >
          </el-tree>
        </el-form-item>
      </el-form>

      <el-switch
        v-model="roleForm.status"
        active-color="#13ce66"
        inactive-color="#ccc"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { roleAdd, roleInfo, roleEdit } from "../../request/api.js";
export default {
  props: ["diaInfo"],
  data() {
    return {
      formLabelWidth: "80px",
      roleForm: {
        rolename: "", // 角色名称
        menus: "", // 色权限 id数组
        status: 1, // 状态1正常2禁用
      },
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 封装一个取消方法
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    // 封装情况方法
    reset() {
      this.roleForm = {
        rolename: "", // 角色名称
        menus: "", // 色权限 id数组
        status: 1, // 状态1正常2禁用
      };
      // resetFields 对整个表单进行重置，将所有字段重置为初始值并且移除校验效果
      this.$refs.roleRef.resetFields();
    },
    // 封装数据回显
    async lookup(id) {
      let res = await roleInfo({ id });
      // console.log(res.list);
      this.roleForm = res.list;
      this.roleForm.id = id;
      // console.log(this.roleForm);
      /*
        后段返回的角色权限menus的数据类型是字符串 ‘1，2，3，4’
        当前tree组件需要的数据格式是数组 [1,2,3,4]
      */
      this.$refs.tree.setCheckedKeys(
        this.roleForm.menus ? this.roleForm.menus.split(",") : []
      );
    },
    // 封装一个确认方法
    confirm() {
      // console.log(this.roleForm);
      // return;
      this.$refs.roleRef.validate(async (val) => {
        if (val) {
          /*
            this.$refs.tree.getCheckedKeys()
            能够取出 树节点的选中值 是数组类型
            但是后段要求我们传入 ‘1，2，3‘
          */
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          // 添加
          // console.log(this.roleForm);
          // return;
          if (this.diaInfo.isAdd) {
            let result = await roleAdd(this.roleForm);
            // console.log(result);
            // return;
            roleAdd(this.roleForm)
              .then((res) => {
                console.log(res, "添加成功");
                return;
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  // 调用取消 关闭弹窗
                  this.cancel();
                  // 获取列表
                  this.$store.dispatch("role/getRoleListAction");
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((error) => {
                console.log(error);
              });
          } else {
            console.log(this.roleForm);
            roleEdit(this.roleForm).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                this.$store.dispatch("role/getRoleListAction");
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    // 减少对服务器发起的请求，如何实现 判断菜单列表是否存在
    if (this.$store.getters["menu/getMenu"].length == 0) {
      // 调用菜单行动
      this.$store.dispatch("menu/getMenuListActions");
    }
  },
  watch: {},
  computed: {},
  filters: {},
  components: {},
};
</script>
<style scoped></style>
